<template>
  <div class="el-scrollbar__wrap" v-loading="loading" element-loading-text="拼命下载中">
    <div class="box">
      <div class="top-box">
        <div class="top_content">
          <i class="el-icon-menu" style="margin-right: 10px; line-height: 30px"></i>
          学习资料
        </div>
        <div class="top_fan">
          <el-button type="primary" @click="homeStudy" class="fh">返回</el-button>
        </div>
      </div>

      <h2 class="studyTitle">
        {{ learningMaterials.datatitle }}
      </h2>
      <div class="publisher-box">
        <div class="publisher-box-left">
          <div class="publisher">
            发布时间：<span>{{ learningMaterials.createDate }}</span>
          </div>
        </div>
        <div class="publisher-box-right">
          <span>({{ learningMaterials.number }})</span> 浏览次数:
        </div>
      </div>
      <!-- <div class="studyContent" v-html="learningMaterials.datacontent"></div> -->
      <div class="btn">
        <el-button type="success" @click="clickAccessory(learningMaterials.annex)">下载附件</el-button>
        <el-button type="success" @click="ClickView(learningMaterials.annex)">查看附件</el-button>
      </div>
      <!-- <div class="bottom_upper">
        <el-button type="text" @click="lowStudy">下一页</el-button>
        <el-button type="text" @click="upStudy">上一页</el-button>
      </div> -->
    </div>
    <iframe :src="ViewPath" frameborder="0" style="width: 100%;height: 100%;"></iframe>
    <!-- <el-dialog title="附件详情" width="700px" :visible.sync="downloadDialog">
      <div>
        <div v-for="(item, index) of this.annexs" :key="index">
          <div style="margin: 10px 20px">
            <span>附件：{{ item }}</span>
          </div>
          <el-button
            type="primary"
            @click="downloadAccessory(item)"
            size="mini"
            style="margin: 0 20px"
            >下载附件{{ index + 1 }}</el-button
          >
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="downloadDialog = false">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        learningMaterials: {},
        lows: 1, //上下页
        upp: 0,
        studyId: "", //学习Id
        annex: "", //附件url
        annexs: [], //用来保存多个附件切割的数组
        downloadDialog: false,
        remark: "",
        AnnexName: '',
        PathUrl: "https://api.dlyrl.com/dlyrl/hr/userinformation/findMaterialContent/pdf?annex=",
        DownloadAttachments: '',
        DownloadPath: '',
        ownloadAttachments: '',
        AnnexNameView: '',
        ViewAttachments: "",
        ViewPath: '',
        loading: false,
        ViewSuffix:'&type=inline',
        DownSuffix:'&type=attachment'

      };
    },
    methods: {
      // 获取学习Id
      getStudyId() {
        this.studyId = this.$route.params.id; //学习id
        console.log(this.studyId, 7777777)
        this.remark = this.$route.params.remarks;
        //    console.log(this.remark)
        //    console.log( this.studyId)
      },
      // 学习详情
      studyDetails() {
        this.$http({
          url:
            "/dlyrl/hr/userinformation/findMaterialContent?id=" +
            this.studyId +
            "&userId=" +
            this.$store.state.user.id,
          method: "get",
        }).then((res) => {
          console.log("学习详情页面", res)
          this.learningMaterials = res.data.companyMaterial;
          this.annex = res.data.companyMaterial.annex; //附件url
        });
      },
      // 下一页
      lowStudy() {
        // console.log("当前id",this.studyId)
        this.$http({
          url:
            "/dlyrl/hr/userinformation/findMaterialNext?id=" +
            this.studyId +
            "&type=" +
            this.lows +
            "&remarks=" +
            this.remark +
            "&userId=" +
            this.$store.state.user.id +
            "&companyId=" +
            this.$store.state.user.companyId,
          method: "get",
        }).then((res) => {
          if (res.data.success) {
            this.learningMaterials = res.data.companyMaterial;
            this.studyId = res.data.companyMaterial.id;
            // console.log("学习详情页面id", this.studyId);
          }
        });
      },
      // 上一页
      upStudy() {
        // console.log("当前id",this.studyId)
        this.$http({
          url:
            "/dlyrl/hr/userinformation/findMaterialNext?id=" +
            this.studyId +
            "&type=" +
            this.upp +
            "&remarks=" +
            this.remark +
            "&userId=" +
            this.$store.state.user.id +
            "&companyId=" +
            this.$store.state.user.companyId,
          method: "get",
        }).then((res) => {
          if (res.data.success) {
            this.learningMaterials = res.data.companyMaterial;
            this.studyId = res.data.companyMaterial.id;
            // console.log("学习详情页面id", this.studyId);
          }
        });
      },
      // 返回
      homeStudy() {
        window.history.go(-1);
        // this.$router.push('/mainhome/mainhome');
      },
      // 查看附件点击
      ClickView(item) {
        this.AnnexNameView = item
        this.loading = true
        this.$http({
          url: "/dlyrl/hr/userinformation/findMaterialContent/pdf",
          method: "GET",
          params: {
            'annex': this.AnnexNameView,
            'type': "inline"
          },
        }).then((res) => {
          if (res.status == 200) {
            this.loading = false
            this.ViewAttachments = res.config.params.annex
            this.ViewPath = `${this.PathUrl}${this.ViewAttachments}${this.ViewSuffix}`
            console.log(this.ViewPath, "测试查看附件");
          }

        })
      },
      //下载附件点击
      clickAccessory(item) {
        this.loading = true
        this.AnnexName = item
        this.$http({
          url: "/dlyrl/hr/userinformation/findMaterialContent/pdf",
          method: "GET",
          params: {
            'annex': this.AnnexName,
            'type': "attachment"
          },
        }).then((res) => {
          if (res.status == 200) {
            this.loading = false
            this.DownloadAttachments = res.config.params.annex
            this.DownloadPath = `${this.PathUrl}${this.DownloadAttachments}${this.DownSuffix}`
            window.open(this.DownloadPath)
          }
        })
      },
      // clickAccessory(item) {
      //   console.log(item,"测试");
      //   this.annexs = [];
      //   if (this.annex.length != 0) {
      //     if (this.annex.indexOf("|") != -1) {
      //       this.annexs = this.annex.split("|");
      //       var arrAnnexs = this.annexs.pop();
      //     } else {
      //       this.annexs.push(this.annex);
      //     }
      //   } else {
      //     this.$message({
      //       message: "暂无附件",
      //       type: "warning",
      //     });
      //   }
      // },
      //下载附件
      // downloadAccessory(item) {
      //  window.open(item)
      // },
    },
    mounted() {
      this.getStudyId();
      this.studyDetails();
    },
  };
</script>

<style lang="scss" scoped>
  .el-scrollbar__wrap {
    background: #fff;
  }

  .box {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
  }

  // 顶部学习资料和返回
  .top_content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 5px;
    font-size: 12px;
  }

  .top-box {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .top_fan {
    display: flex;
    flex-direction: row-reverse;
  }

  .fh {
    width: 50px !important;
    height: 30px !important;
    font-size: 12px !important;
    padding: 0 !important;
  }

  // 学习标题
  .studyTitle {
    padding-top: 35px;
    text-align: center;
    font-size: 24px;
    margin: 20px 0;
  }

  // 中间内容顶部标题
  .publisher {
    padding-top: 5px;
    padding-left: 10px;
    font-size: 14px;
    color: #666;
  }

  .publisher-box {
    width: 65%;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding-bottom: 15px;
    border-bottom: #d3d3d3 1px solid;
  }

  .publisher-box-left {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .publisher-box-right {
    width: 50%;
    display: flex;
    flex-direction: row-reverse;
    font-size: 14px;
    color: #666;
  }

  // 学习内容
  .studyContent {
    padding: 30px 80px;
    box-sizing: border-box;
  }

  //下载附件
  .btn {
    width: 100%;
    text-align: center;
  }

  // 上，下一页
  .bottom_upper {
    position: absolute;
    bottom: 20px;
    right: 40px;
    display: flex;
    flex-direction: row-reverse;
    font-size: 14px;
  }

  .bottom_upper button {
    margin-left: 10px;
    cursor: pointer;
  }
</style>